<template>
	<view class="hh-container">
    <t-header @back="clickNavBackFn">历史持仓</t-header>
		<!-- content -->
		<view class="hh-content">
			<!-- filter -->
			<view class="hh-filter">
				<data-picker @change="changeDate"></data-picker>
			</view>
			<!-- list -->
			<view class="hh-list">
				<view class="hh-l-header flex align-center head">
					<view class="col-5">股票/代码</view>
					<view class="col-4 text-center">本金|数量</view>
					<view class="col-4 text-center">买入|卖出价</view>
					<view class="flex-sub text-center">收益/卖出类型</view>
				</view>
				<view class="hh-l-content">
					<mescroll-uni
						:height="`${height}rpx`"
						:down="downOption"
						:up="upOption"
						@init="mescrollInit"
						@down="downCallback"
						@up="upCallback"
					>
						<view v-for="(item, index) in list" :key="index" class="item">
							<view class="flex align-center">
								<view class="col-5">
									<view>{{item.title}}</view>
									<view class="margin-top-sm flex align-center">
										<image class="tag" :src="`/static/images/icons/${item.marketCode}.png`" mode="" />
										<text class="text-sm">{{item.code}}</text>
									</view>
								</view>
								<view class="col-4 text-center">
									<view>{{item.money}}</view>
									<view class="margin-top-sm">{{item.number}}</view>
								</view>
								<view class="col-4 text-center">
									<view>{{item.buyprice}}</view>
									<view class="margin-top-sm">{{item.sellprice}}</view>
								</view>
								<view class="flex-sub text-center" :class="item.profitLose>0?'text-red':'text-green'">
									<view>{{item.profitLose}}</view>
									<view class="margin-top-sm">平仓</view>
								</view>
							</view>
							<view class="flex justify-between padding-top text-gray text-sm">
								<text>{{item.createtime_name}}</text>
								<text>{{item.outtime_name}}</text>
							</view>
							<view class="margin-top">
								<tui-button @click="toDetail" :index="index" type="theme" plain :size="26"
									height="80rpx">查看详细</tui-button>
							</view>
						</view>
					</mescroll-uni>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue';
import {onLoad, onPageScroll, onReachBottom} from '@dcloudio/uni-app';
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";

const {mescrollInit, downCallback, getMescroll} = useMescroll(onPageScroll, onReachBottom);

// components
import DataPicker from '@/components/work/DatePicker.vue';
import THeader from '@/components/views/t-header/index.vue'; // 头部组件

// api
import {holdingHistory} from '@/api/user.js';

// utils
import {getMarketCode} from '@/utils/stock.js';

// height
const height = ref(0);

onLoad(() => {
	height.value = 1216;
});

// 点击返回
const clickNavBackFn = () => {
	const pages = getCurrentPages();
	if (pages.length >= 2) {
		uni.navigateBack();
	} else {
		uni.switchTab({
			url: '/pages/my/index'
		});
	}
};

const s_time = ref('');
const e_time = ref('');

// 日期 change 事件
const changeDate = (e) => {
	s_time.value = e[0];
	e_time.value = e[1];
	
	setTimeout(() => {
		getMescroll().resetUpScroll();
	}, 300);
};

// mescroll-body 配置（down && up）
const downOption = {
	auto: false
};
const upOption = {
	auto: false,
	empty: {
		use : true,
		icon: '/static/images/wushuju.png',
		tip: '~ 空空如也 ~'
	}
};

// 列表数据
const list = ref([]);

const upCallback = (mescroll) => {
	holdingHistory({
		status: 2,
		buytype: 1,
		type: 2,
		s_time: s_time.value,
		e_time: e_time.value,
		page: mescroll.num,
		size: mescroll.size,
	}).then(res => {
		if (mescroll.num == 1) list.value = [];
		if (res.code == 1) {
			res.data.list.forEach(v => {
				v.marketCode = getMarketCode(v.allcode)
			})
			list.value = list.value.concat(res.data.list); //追加新数据
			mescroll.endSuccess(res.data.list.length);
		} else {
			mescroll.endErr();
		}
	})
};

const toDetail = (e) => {
	let item = list.value[e.index];
	uni.navigateTo({
		url: './historyDetail?data=' + JSON.stringify(item)
	});
};
</script>

<style lang='scss' scoped>
.hh-container {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	background: #F5F5F5;
	box-sizing: border-box;

	.hh-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin: 0 20rpx 26rpx;
		padding: 0 20rpx;
		border-radius: 34rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		
		.hh-filter {
			height: 96rpx;
			border-bottom: 1px solid #E2E2E2;
		}

		.hh-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 22rpx 0;
			box-sizing: border-box;
			
			.hh-l-header {
				margin-bottom: 24rpx;
				color: #8F8F8F;
				font-size: 26rpx;
				font-weight: 400;
				font-family: PingFangSC, PingFang SC;
			}
			
			.hh-l-content {
				flex: 1;
				height: 0;
				
				.item {
					padding: 30rpx 20rpx;
					border-bottom: 1px solid #f2f2f2;
					font-size: 26rpx;
					box-sizing: border-box;
				
					.tag {
						width: 36rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}
				}
				
				::v-deep(.mescroll-uni) {
					.empty-icon {
						width: 220rpx;
					}
				}
			}
		}
	}
}
</style>
